<template>
	<div class="flex items-center">
		<base-icon
			class="trend-icon down"
			:class="{ blink: downBlink }"
			name="down2"
			@animationend="onDownAnimationEnd"></base-icon>
		<base-number-flip class="mx-1" :value="value" :trend="trend" />
		<base-icon
			class="trend-icon up"
			:class="{ blink: upBlink }"
			name="superior2"
			@animationend="onUpAnimationEnd"></base-icon>
	</div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { BaseNumberFlip, BaseIcon } from '@/components/base'

const props = defineProps({
	value: {
		type: [Number, String],
		default: '-'
	},
	trend: {
		type: String,
		default: ''
	}
})

const downBlink = ref(false)

const upBlink = ref(false)

const onDownAnimationEnd = () => {
	downBlink.value = false
}

const onUpAnimationEnd = () => {
	upBlink.value = false
}

watch(
	() => [props.trend],
	() => {
		if (props.trend === 'up') {
			upBlink.value = true
		} else if (props.trend === 'down') {
			downBlink.value = true
		}
	}
)
</script>

<style lang="scss" scoped>
@keyframes blink {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.trend-icon {
	font-size: 10px;
	opacity: 0;
	&.down {
		color: var(--color-danger);
	}
	&.up {
		color: var(--color-success);
	}
	&.blink {
		animation: blink 1s 3 forwards;
	}
}
</style>
